<template>
    <el-container class="index-container">
        <!-- 头部区域 -->
        <el-header>
            <span>PFT</span>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 页面侧边区域 qqqqqqqqq-->
            <el-aside width="200px">
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px; ">
                    <el-radio-button :label="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" background-color="#E0F8F7"
                         @close="handleClose" :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-tickets"></i>
                            <span slot="title">今日计划</span>
                        </template>
                        <el-menu-item-group>
                            <!-- <span slot="title">今日</span> -->
                            <el-menu-item index="1-1">ToDoList</el-menu-item>
                            <el-menu-item index="1-2">每日复盘</el-menu-item>
                        </el-menu-item-group>

                        <el-submenu index="1-3">
                            <span slot="title">学习室</span>
                            <el-menu-item index="1-3-1">it教程</el-menu-item>
                            <el-menu-item index="1-3-2">it工具</el-menu-item>
                        </el-submenu>
                        <el-submenu index="1-4">
                            <span slot="title">我的笔记</span>
                            <el-menu-item index="1-4-1">笔记1</el-menu-item>
                            <el-menu-item index="1-4-2">笔记2</el-menu-item>
                            <el-menu-item index="1-4-3">笔记3</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-news"></i>
                        <span slot="title">今日热点</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">今日内容</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-goods"></i>
                        <span slot="title">今日账本</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 右侧主体区域 -->
            <el-main>
             <keep-account />
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    import keepAccount from "@/pages/KeepAccount"
    export default {
        data() {
            return {
                isCollapse: true
            };
        },
      components:{
        keepAccount
      },
        methods: {
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            }
        }

    }
</script>

<style lang="less" scoped>
    .index-container {
        height: 100vh;
    }

    .el-header {
        background-color: #E0F8F1;
        color: black;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-aside {
        background-color: #CEF6EC;

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
    }

    .el-main {
        background-color: #EFFBF5;
    }
</style>
